/*
 * $Id: _queries.scss 331 2012-12-02 21:57:37Z bobcat $
 * Basic media queries for all pages. DSC is designed mobile-first,
 * so mobile-specific rules go into _main.scss
  */

@media (min-width: 30em) {
  .call-us, .promo {
    width: 85%;
  }

  .extphone {
    display: inline;
  }
}

// show content in 2 columns
@media (min-width: 40em) {
  $left-col-width: 13em;
  $right-col-width: auto;
  $col-padding: 1em;
  $num-cols: 2;
  @include holy-grail($left-col-width, $right-col-width, $col-padding, $num-cols);

  header, footer {
    font-size: .9em;

    a, button {
      padding: $padding-button-y $padding-button-x;
    }
  }

  header {
    @include background-image(linear-gradient($banner-color 93%, $banner-color - #111 100%));
    padding-top: $padding;
    padding-bottom: $padding;

    .wrap {
      width: 90%;
    }
  }

  header button, footer a {
    @include border-radius($border-radius-big);
  }

  h2 {
    display: none; // h2s not necessary in columnized layout
  }

  h3 {
    font-size: larger;
  }

  header a, footer ul, header button {
    display: inline-block; // restore aux. information
  }

  header {
    a {
      color: $text-color-lite;
      display: inline-block;

      &:hover {
        color: $link-hover-color;
      }
    }
  }

  header {
    a, button {
      font-size: 1em;
    }
  }

  footer {
    padding: $padding 0;

    li {
      padding: .5em 1em;
    }

    a {
      width: auto;
    }
  }

  .call-us, .promo {
    font-size: 1em;
  }

  .promo {
    margin-bottom: 0;
  }

  #banner {
    margin-bottom: 1em;

    td {
      text-align: center;
    }
  }

  #co-info, #account {
    button {
      width: auto;
    }
  }

  #login, #logout {
    float: right;
    margin-right: $margin;
  }

  #account form {
    float: right;
  }

  #logo {
    background-position: center center;
    background-size: 87%;
    height: 9em;
  }

  #co-info {
    float: left;

    a {
      margin-top: .2em;
      margin-bottom: .2em;
    }
  }

  #account {
    float: right;

    a, button {
      margin-top: .2em;
      margin-bottom: .2em;

      span {
        background-position: left center;
      }
    }
  }

  #leave {
    width: auto;
  }

  #resellers, #sitemap, #leave {
    float: none;
    margin: .5em;
  }

  #col-container {
    .column {
      padding-top: $padding;
      padding-bottom: $padding * 3;
    }
  }

  #left-col {
    text-align: left;

    nav {
      & > ul > li { // top-level li elements
        border: none;

        a { // all a elements
          background-color: white;
          padding-top: .1em;
          padding-bottom: .1em;
          color: $link-color;
          font-size: inherit;

          &:hover, &.active {
            color: $link-hover-color-dark;
          }
        }

        & > a { // top level a elements have bullet img
          background-color: white;
          background-image: url('../../img/icons/light/64px/64_bullet.png');
          background-position: left .55em;
          background-repeat: no-repeat;
          background-size: .6em;
          padding-left: 1em;

          &:hover, &.active {
            background-color: white;
            background-image: url('../../img/icons/light/64px/64_bullet.png');
            background-position: left .55em;
            background-repeat: no-repeat;
            background-size: .6em;
          }
        }

        & > ul { // sub-lists
          li a {
            background-color: white;
            padding-left: 1.5em;
            font-size: .9em;

            &:hover {
              background-color: white;
            }
          }
        }

        &:hover {
          & > a {
            background-color: white;
            background-position: left .55em;
            background-repeat: no-repeat;
            background-size: .6em;
            color: $link-hover-color-dark;
          }
        }
      } // end #left-col nav > ul > li
    } // end #left-col nav

    nav.drop {
      & > ul > li { // top-level li elements
        & > a { // top level a elements have arrow img
          background-image: url('../../img/icons/light/64px/64_arrow.png');

          &:hover, &.active {
            background-image: url('../../img/icons/light/64px/64_arrow-down.png');
          }
        }

        &:hover > a {
          background-image: url('../../img/icons/light/64px/64_arrow-down.png');
        }
      } // end #left-col nav > ul > li
    } // end #left-col nav.drop
  } // end #left-col

  #search {
    font-size: large;
  }

  #top-sellers {

    nav {
      font-size: .75em;
    }

    li {
      margin-bottom: .6em;
    }

    a {
      line-height: 1.26em;
    }
  }
}

@media (min-width: 50em) {
  header, footer {
    font-size: 1em;
  }

  .call-us, .promo {
    width: auto; // use up some new horiz. space
    padding: 0;
  }

  .call-us {
    margin-bottom: .2em;
  }

  .promo {
    font-size: .85em;
    margin: .5em auto 0 auto;
  }

  #banner {
    font-size: large;

    td {
      display: table-cell; // display side-by-side
      text-align: right;   // push p tags to the right
      width: 50%;
      height: 8em;
    }

    p, a {
      float: right;
      clear: right;
    }
  }

  #logo {
    background-position: left center;
    background-size: contain;
  }
}

@media (min-width: 65em) {
  .extphone {
    padding-top: 0;
    padding-bottom: 0;
  }

  #banner {
    font-size: medium;

    a {
      float: none;
      background: none;
      padding: 0;
      font-size: inherit;
      margin: 0;
    }
  }
}

@media (min-width: 75em) {
  #banner {
    font-size: larger; // boost banner size
    margin-bottom: 0;  // trim excess vertical space
  }

  #logo {
    background-size: 85%;
  }

  #col-container  {
    .column {
      padding-top: $padding;
    }
  }

}

@media (min-width: 90em) {
  #banner {
    font-size: larger; // boost banner sizes

    td {
      height: 6em; // don't need as much vertical space now
    }
  }

  #logo {
    background-size: 74%;
  }
}

@media (min-width: 95em) {
  #logo {
    background-size: 66%;
  }
}